<template>
  <div class="unpay-order-tip-cpt">
    <div v-show="isShow" class="dashArea" id="dashArea">
      <div class="order_box">
        <div class="order_bg"><img src="https://img.wifenxiao.com/h5-wfx/images/public/dash-bg.png" /></div>
        <div class="order_detail">
          <div class="order_img">
            <img :src="resData.image">
          </div>
          <div class="order_title">{{resData.title}}</div>
          <div class="order_hint">
            <!-- 定金尾款未支付订单 -->
            <template v-if="resData.is_presale == 1">
              <p>尾款请尽快支付</p>
              <p>支付后会尽快安排发货</p>
            </template>
            <!-- 标准未支付订单 -->
            <template v-else>
            <p>未支付的订单将在不久后自动关闭</p>
            <p>请尽快支付</p>
            </template>
            <div class="spinner">
              <span class="bouncex bounce1"></span>
              <span class="bouncex bounce2"></span>
              <span class="bouncex bounce3"></span>
            </div>
          </div>
          <ul>
            <a class="pay-close" href="javascript:void(0)" @click="isShow=false">
              <li class="btn_l">知道了</li>
            </a>
            <a class="pay-enter" @click="openLink(resData.url)">
              <li class="btn_r">继续支付</li>
            </a>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 为支付订单提醒 cpt
 * @author gaogm
 */
import Vue from 'vue'
import { reqPostCommonUnpayOrderInfo } from '@/api/public/index'
import { getTokenByKey, setTokenByKey } from '@/utils/auth'
import { openPage } from '@/utils/utils'

export default Vue.extend({
  name: 'unpay-order-tip-cpt',
  data() {
    return {
      isShow: false,
      resData: {}
    }
  },
  mounted() {
    this.fetchUnpayOrderInfo()
  },
  methods: {
    fetchUnpayOrderInfo() {
      reqPostCommonUnpayOrderInfo().then(res => {
        const data = res
        if (res.status == 1) {
          this.resData = data
          if (res.remind == 1) {
            const d = new Date()
            const [day, month, year] = [d.getDate(), d.getMonth() + 1, d.getFullYear()]
            const detailDate = day + '.' + month + '.' + year
            // 判断当日是否打开过
            if (detailDate != getTokenByKey('lastLoginData')) {
              if (res.image) {
                // 原来 不知道为什么只兼容了jpg，png 和 jpeg 的都没有兼容 图片显示不出来
                // const tempAttr = res.image.indexOf('.jpg') > 0 ? res.image.indexOf('.jpg') : res.image.indexOf('.JPG')
                // 修改后的第一种方式
                const attr = res.image.substr(0, res.image.indexOf('@!') )
                // 这是第二种方式 压缩图片 暂时先注释在这里 看是否需要
                // if (res.image.indexOf('@!') > 0) {
                //   res.image = `${res.image}80x80`
                // } else {
                //   res.image = res.image
                // }
                // console.log('attr', attr)
                res.image = attr ? attr : res.image
                // console.log(res.image, 'res.image')

              }
              this.isShow = true
              setTokenByKey('lastLoginData', detailDate)
            }
          }
        }
      }).catch(_ => {
      })
    },
    openLink(link) {
      openPage(link)
    },
  }
})
</script>

<style lang="scss">
.unpay-order-tip-cpt {
  .dashArea {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    .order_box {
      position: fixed;
      margin: 40% 15%;
      text-align: center;
      .order_bg {
        img {
          height: 100%;
          width: 100%;
        }
      }
      .order_detail {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        .order_img {
          width: 37.5%;
          height: 31.5%;
          background: rgba(0, 0, 0, 0.2);
          position: relative;
          border-radius: 8px;
          display: inline-block;
          margin-top: 18%;
          img {
            height: 100%;
            width: 100%;
          }
        }
        .order_title {
          font-size: 38px;
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding: 0 6%;
          margin-top: 5%;
          height: 8%;
        }
        .order_hint {
          color: #58595b;
          font-size: 28px;
          margin-top: 2%;
          line-height: 44px;
          text-align: center;
          .spinner {
            text-align: center;
          }
          .spinner .bouncex {
            display: inline-block;
            width: 16px !important;
            height: 16px;
            background-color: #666;
            border-radius: 100%;
            -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
            animation: bouncedelay 1.4s infinite ease-in-out;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
          }
          .spinner .bounce1 {
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
          }
          .spinner .bounce2 {
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
          }
        }
        ul {
          border-top: 2px solid #ededed;
          display: inline-block;
          width: 94%;
          position: absolute;
          bottom: 3%;
          left: 0;
          margin: 0 3%;
          li {
            width: 50%;
            float: left;
            color: #9c9c9c;
            font-size: 30px;
            line-height: 84px;
            text-align: center;
            &.btn_r {
              border-left: 2px solid #ededed;
              margin-left: -2px;
              color: #ff0000;
            }
          }
        }
      }
    }
  }

  @keyframes bouncedelay {
    0%, 80%, 100% {
      transform: scale(0.0);
      -webkit-transform: scale(0.0);
    } 
    40% {
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
    }
  }
  @-webkit-keyframes bouncedelay {
    0%, 80%, 100% {
      transform: scale(0.0);
      -webkit-transform: scale(0.0);
    } 
    40% {
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
    }
  }
}
</style>
